<template>
    <div class="main">
        <div class="form-container">
            <div  class="form-main">
                <h2 style="background:#265eff;">省应急管理厅疫情上报系统</h2>
                <p class="warn-content">为严防疫情扩散，进一步做好新型冠状病毒的肺炎疫情防控工作，请如实填写以下信息!</p>
                <span class="required" style="color:red">*</span> <label for="name">姓名</label><br/>

                <input class="form-border" id="name" type="text" name="username"  placeholder="姓名" required="required" v-model="nameModel"  /> <br/>
                <!-- <span class="required" style="color:red">*</span>  -->
                <label for="name">处室</label><br/>

                <input class="form-border" id="department" type="text" name="department"  placeholder="请填写处室"  v-model="departmentModel"  /> <br/>
                <!-- <span class="required" style="color:red">*</span>  -->
                <label for="phone">联系电话</label><br/>
                <input class="form-border" id="phone" type="text" name="phoneNum"  placeholder="联系电话" v-model="phoneModel" /><br/> 

                <!-- <span class="required" style="color:red">*</span>  -->
                <label for="name">常住地址</label><br/>

                <input class="form-border" id="adress" type="text" name="address"  placeholder="请填写常住地址" v-model="addressModel"  /> <br/>
                <!-- <span class="required" style="color:red">*</span>  -->
                <label for="name">现住地址</label><br/>

                <input class="form-border" id="newAddress" type="text" name="newAddress"  placeholder="请填写现住地址" v-model="newAddressModel"  /> <br/>
                <!-- <span class="required" style="color:red">*</span>  -->
                <label for="gender" required>本人状况</label><br/>
                <div class="form-border form-twoBor" style="margin-bottom:5px;">
                    <div style="border-bottom: 1px solid rgba(255, 255, 255, 0.24);">
                        <input  type="radio" name="illType" value="1"   id="one" checked="checked" v-model="personModel" /><label for="one">确诊</label>
                    </div>
                    <div>
                        <input type="radio" name="illType" value="2" id="two" v-model="personModel" /><label for="two">疑似</label>
                    </div>
                     <div>
                        <input type="radio" name="illType" value="3" id="three" v-model="personModel" /><label for="three">密接</label>
                    </div>
                     <div>
                        <input type="radio" name="illType" value="4" id="four" v-model="personModel" /><label for="four">正常</label>
                    </div>
                </div>
                 <input style="display:none; width: 100%; height: 32px; border-radius: 3px; margin: 0 0 10px 0px;" class="yy-input" id="personMsg" type="text"  placeholder="请填写备注信息" v-model="personMsgModel"  />
                <!-- <span class="required" style="color:red">*</span>  -->
                <label for="name">居家隔离时间</label><br/>
                <div style="margin-top:5px; width:90%; height: 32px; line-height:32px; border: 1px solid #cccccc; text-align: center; " @click="showTimePlugin">
                   <span class="select_show">{{queryTime}}</span> 至 <span class="select_show">{{endTime}}</span>
                     <!-- <el-date-picker
                        style="width:142px; height: 35px;"
                        v-model="startDate"
                        format="yyyy-MM-dd"
                        type="datetime"
                        :picker-options="startOptions"
                        @change="selectStartTime"
                        placeholder="开始时间">
                    </el-date-picker> 
                     <el-date-picker
                     style="width:142px; height: 35px;"
                        v-model="endDate"
                        format="yyyy-MM-dd"
                        type="datetime"
                        :picker-options="endOptions"
                        :disabled = 'isFlag'
                        @change="selectEndTime"
                        placeholder="至今">
                    </el-date-picker>  -->
                </div><br/>
                <label for="family">家庭成员人数</label><br/>

                <input class="form-border" id="family" type="text" name="family"  placeholder="家庭成员人数" required="required" v-model="familyNum"  /> <br/>
                 <!-- <span class="required" style="color:red">*</span>  -->
                 <label for="gender" required>家庭成员状况</label><br/>
                <div class="form-border form-twoBor" style="margin-bottom:5px;">
                    <div style="border-bottom: 1px solid rgba(255, 255, 255, 0.24);">
                        <input  type="radio" name="familyMsg" value="1"   id="male" checked="checked" v-model="familyModel" /><label for="a">确诊</label>
                    </div>
                    <div>
                        <input type="radio" name="familyMsg" value="2" id="female" v-model="familyModel" /><label for="b">疑似</label>
                    </div>
                     <div>
                        <input type="radio" name="familyMsg" value="3" id="female" v-model="familyModel" /><label for="c">密接</label>
                    </div>
                     <div>
                        <input type="radio" name="familyMsg" value="4" id="female" v-model="familyModel" /><label for="d">正常</label>
                    </div>
                </div>
                <input style="display:none; width: 100%; height: 32px; border-radius: 3px; margin: 0 0 10px 0px;" class="yy-input" id="familyMsgs" type="text" name=""  placeholder="请填写备注信息" v-model="familyMsgModel"  />
                <!-- <span class="required" style="color:red">*</span>  -->
                <!-- <label for="gender" required>性别</label><br/>
                <div class="form-border form-twoBor">
                    <div style="border-bottom: 1px solid rgba(255, 255, 255, 0.24);">
                        <input  type="radio" name="gender" value="1"   id="male" checked="checked" v-model="genderModel" /><label for="male"> 男</label>
                    </div>
                    <div>
                        <input type="radio" name="gender" value="2" id="female" v-model="genderModel" /><label for="female"> 女</label>
                    </div>
                </div> -->
                <!-- <span class="required" style="color:red">*</span> <label for="age">年龄</label><br/>
                <input class="form-border" id="age" type="text" name="username"  placeholder="年龄" required="required" v-model="ageModel" /> <br/> -->
                
                <!-- <label for="symptom">症状和体征</label><br/>
                <div class="form-border tizheng clearfix">
                    <div>
                        <input type="checkbox" name="symptom" value="发热" v-model="symptoModel"/> 发热
                    </div>
                    <div>
                        <input type="checkbox" name="symptom" value="寒战" v-model="symptoModel"/> 寒战
                    </div>
                    <div>
                        <input type="checkbox" name="symptom" value="咳嗽" v-model="symptoModel"/> 咳嗽
                    </div>
                    <div>
                        <input type="checkbox" name="symptom" value="咳痰" v-model="symptoModel"/> 咳痰
                    </div>
                    <div>
                        <input type="checkbox" name="symptom" value="头痛" v-model="symptoModel"/> 头痛
                    </div>
                    <div>
                        <input type="checkbox" name="symptom" value="咽痛" v-model="symptoModel"/> 咽痛
                    </div>
                    <div>
                        <input type="checkbox" name="symptom" value="鼻塞" v-model="symptoModel"/> 鼻塞
                    </div>
                    <div>
                        <input type="checkbox" name="symptom" value="流涕" v-model="symptoModel"/> 流涕
                    </div>
                    <div>
                        <input type="checkbox" name="symptom" value="肌肉酸痛" v-model="symptoModel"/> 肌肉酸痛
                    </div>
                    <div>
                        <input type="checkbox" name="symptom" value="关节酸痛" v-model="symptoModel"/> 关节酸痛
                    </div>
                    <div>
                        <input type="checkbox" name="symptom" value="乏力" v-model="symptoModel"/> 乏力
                    </div>
                    <div>
                        <input type="checkbox" name="symptom" value="胸闷" v-model="symptoModel"/> 胸闷
                    </div>
                    <div>
                        <input type="checkbox" name="symptom" value="气促" v-model="symptoModel"/> 气促
                    </div>
                    <div>
                        <input type="checkbox" name="symptom" value="呼吸困难" v-model="symptoModel"/> 呼吸困难
                    </div>
                    <div>
                        <input type="checkbox" name="symptom" value="腹泻" v-model="symptoModel"/> 腹泻
                    </div>
                    <div>
                        <input type="checkbox" name="symptom" value="结膜炎" v-model="symptoModel"/> 结膜炎
                    </div>
                </div>
                <span class="required" style="color:red">*</span> 
                <label for="temperature">体温（最高体温摄氏度）</label><br/>
                <input  class="form-border" id="temperature" type="text" name="temperature"  placeholder="最高体温" required="required" v-model="temperatureModel" /><br/>
            
                <span class="required" style="color:red">*</span> <label for="fever">发病前14天内，生活工作的场所是否有发热、咳嗽的病人？</label><br/>
                <div class="form-border form-twoBor">
                    <div style="border-bottom: 1px solid rgba(255, 255, 255, 0.24);">
                        <input type="radio" name="have-patient" value="1"   id="feverYes" v-model="feverModel"/><label for="feverYes"> 是</label>
                    </div>
                    <div>
                        <input type="radio" name="have-patient" value="0" id="feverNo" checked="checked" v-model="feverModel"/><label for="feverNo"> 否</label> 
                    </div>
                </div>

                <span class="required" style="color:red">*</span> <label for="contact">发病前14天内是否接触过类似病例？</label><br/>
                <div class="form-border form-twoBor">
                    <div style="border-bottom: 1px solid rgba(255, 255, 255, 0.24);">
                        <input type="radio" name="contact-patient" value="1"   id="contactYes" v-model="contactModel" /><label for="contactYes"> 是</label>
                    </div>
                    <div>
                        <input type="radio" name="contact-patient" value="0"   id="contactNo" checked="checked" v-model="contactModel" /><label for="contactNo"> 否</label>
                    </div>
                </div> -->
                <label for="name">其他</label><br/>
                <input class="form-border" id="someone" type="text" name="someone"  placeholder="选填"  v-model="someone"  /> <br/>
            </div>
            <button class="form-submit" type="submit" @click="submitClick">提交</button>
        </div>
        <datetime style="display:none;" v-model="queryTime" @on-change="changeTime" :show.sync="timeShow"></datetime>
        <confirm v-model="showconfirm"
             :title="confirmtitle"
             @on-cancel="onCancel"
             @on-confirm="onConfirm"
             @on-show="onShow"
             @on-hide="onHide">
        </confirm>
    </div>
</template>
<script>
import { questionnaireData } from '@/assets/js/service'
import { Confirm , Datetime} from 'vux'

export default {
    components: {
        Confirm,
        Datetime
    },
    data () {
        return {
            nameModel:'',
            genderModel:'1',
            ageModel:'',
            phoneModel:'',
            symptoModel:[],
            temperatureModel:'',
            feverModel:'1',
            contactModel:'1',
            showconfirm:false,
            confirmtitle:"是否继续填写",
            // 新增
            queryTime:"开始时间",
            endTime: '',
            timeShow:false,
            isFlag: true ,
            familyMsgModel:'',
            familyModel:'4',
            familyNum:'',
            departmentModel:'',
            addressModel:'',
            newAddressModel:'',
            personModel:'4',
            startDate: '',
            endDate: '',
            value1: '',
            someone:'',
            personMsgModel:'',
            // 日期选择器
            startOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now() - 8.64e7;
                }
            },
            endOptions: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7;
                }
            },
        }
    },
    created () {

    },
    mounted: function () {
       let personMsg = localStorage.getItem('personMsg');
       this.endTime = this.getCurrentDate();
       console.log(this.endTime);
    },
    watch:{
        personModel(){
            console.log(this.personModel);
            let personMsg = document.getElementById('personMsg');
            if(this.personModel != 4){
              personMsg.style.display = 'block';
            } else {
              personMsg.style.display = 'none';  
            }
        },
        familyModel(){
            console.log(this.familyModel);
            let personMsg = document.getElementById('familyMsgs');
            if(this.familyModel != 4){
              personMsg.style.display = 'block';
            } else {
              personMsg.style.display = 'none';  
            }
        }
    },
    methods: {
        showTimePlugin(){
            this.timeShow=true;
            
        },
        changeTime(){
            console.log("change time")
            const cqueryTime=Date.parse(this.queryTime);
            const cendTime=Date.parse(this.endTime);
            if(cqueryTime >= cendTime){
                this.queryTime = "开始时间";
                window.vm.$vux.toast.text('请重新填写开始时间', 'bottom')
            }
        },
        getCurrentDate(){
              const timeStr = '-';
              const curDate = new Date();
              const curYear =curDate.getFullYear();  //获取完整的年份(4位,1970-????)
              const curMonth = curDate.getMonth()+1;  //获取当前月份(0-11,0代表1月)
              const curDay = curDate.getDate();       //获取当前日(1-31)
              const curWeekDay = curDate.getDay();    //获取当前星期X(0-6,0代表星期天)
              const curHour = curDate.getHours();      //获取当前小时数(0-23)
              const curMinute = curDate.getMinutes();   // 获取当前分钟数(0-59)
              const curSec =curDate.getSeconds();      //获取当前秒数(0-59)
           // const Current= curYear+timeStr+curMonth+timeStr+curDay+' '+curHour+':'+curMinute+':'+curSec;
             const Current= curYear+timeStr+curMonth+timeStr+curDay ;
//               console.log(Current);
              // this.datetime=Current;
              return Current;
        },
        //开始日期
          selectStartTime(val) {
            // this.endOptions.disabledDate = function (time) {
            //   return time.getTime() <= new Date(val).getTime(new Date(val));
            // };
            this.startDate = val;
          },
          //结束日期
          selectEndTime(val){
            // this.endOptions.disabledDate = function (time) {
            //   return time.getTime() <= new Date(val).getTime(new Date(val));
            // };
            this.endDate = val
          },
        getUrlParam(name){
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if(r!=null)
                return  unescape(r[2]);
            return null;
        },
        onCancel(){
            this.$router.push({path:"/dailylist",query: {}});
        },
        onConfirm(){
            console.log("确认删除")
        },
        onShow(){
            console.log("显示")
        },
        onHide(){
            console.log("隐藏")
        },
        typeTime(val){
            const d = new Date(val);
            const resDate = d.getFullYear() + '-' + this.p((d.getMonth() + 1)) + '-' + this.p(d.getDate());
            return resDate;
        },
        p(s) {
            return s < 10 ? '0' + s : s
        },
        submitClick(){
            let _this = this;
            //  _this.showconfirm=true;
            // this.startDate = this.typeTime(this.startDate);
            // this.endDate = this.typeTime(this.endDate);
            // &&_this.$verification(this.ageModel,0,"年龄")&&_this.$verification(this.phoneModel,0,"电话")&&_this.$verification(this.phoneModel,1,"电话")&&_this.$verification(this.temperatureModel,0,"体温")
            if(_this.$verification(this.nameModel,0,"姓名")){
                    var param={
                        "name":this.nameModel,
                        "sex":this.genderModel,
                        "age":this.ageModel,
                        "phone":this.phoneModel,
                        "symptom":this.symptoModel.join(','),
                        "temp":this.temperatureModel,
                        "longitude":"35.212234567",
                        "latitude":"160.34234567",
                        "isPatient":this.feverModel,
                        "isContact":this.contactModel,
                        // 新增
                        "department": this.departmentModel ,
                        "perAddress": this.addressModel,
                        "curAddress": this.newAddressModel,
                        "isolationTime": this.queryTime ,//居家隔离时间
                        "myCondition": this.personModel ,//本人状况类型
                        "familyStatus": this.familyModel ,
                        "familyNumber": this.familyNum ,
                        "familyStatusDescribe":this.familyMsgModel ,
                        "myConditionDescribe":this.personMsgModel ,
                    };
                    console.log(param)
                    localStorage.setItem('personMsg', param)
                    // return;
                    
                    questionnaireData(param,function(res){
                        console.log("返回正常questionnaireData",res)
                        if(res.state){
                            console.log("ddd"+res)
                            _this.showconfirm=true;
                        }else{
                            _this.$showBottomToast("请求数据异常！")
                        }
                    })
            }
            
            console.log(this.nameModel+'+'+this.genderModel+'+'+this.ageModel+'+'+this.phoneModel+'+'+this.symptoModel
            +'+'+this.temperatureModel+'+'+this.feverModel+'+'+this.contactModel)
        }
    }
}
</script>
<style lang="less" scoped>
.main{
    overflow: hidden;
    // background: url("../../assets/images/home/bj.png") 0 0;
    background-size: 100% 100%;
    .form-container{
        // background: url("../../assets/images/home/cont_bj.png") 0 0;
        background-size: 100% 100%;
        width: 100%;
        // margin: 0 3%;
        // padding: 0 6px;
        margin-bottom: 10px;
        padding-bottom: 25px;
        .form-main{
            width: 100%;
            // margin-top: 130px;
            margin-bottom: 30px;
            padding: 0 20px;
            color: #333333;
            .warn-content{
                margin-top: 10px;
                margin-bottom: 18px;
                line-height: 30px;
                font-size: 15px;
            }
            h2{
                text-align: center;
                color: #fff;
                width: calc(100% + 40px);
                margin-left: -20px;
                border-bottom: 1px solid rgba(255, 255, 255, 0.24);
                height: 60px;
                line-height: 60px;
                font-size: 24px;
            }
            h4{
                margin-top: 15px;
            }
            .form-border{
                background-color: rgba(255, 255, 255, 0.9);
                color: #333333;
                padding:5px;
                margin: 5px 0;
                width: 100%;
                margin-bottom: 20px;
                border-radius: 3px;
            }
            .tizheng{
                div{
                    width: 33.3333%;
                    float: left;
                    padding: 10px 5px;
                    font-size: 15px;
                    input{
                        vertical-align: middle;
                        width: 15px;
                        height: 15px;
                    }
                }
            }
            .form-twoBor{
                padding: 5px 0;
                div{
                    width: 100%;
                    padding: 5px 10px;
                    input{
                        vertical-align: middle;
                        width: 20px;
                        height: 20px;
                    }
                    label{
                        font-size: 15px;
                    }
                }

            }
            
        }
        .form-submit{
            width: 90%;
            margin-left: 5%;
            height: 50px;
            background: #228ed9;
            border-radius: 8px;
            color: white;
            font-size: 15px;
            border: none;
            outline: none;
        }
    }
input{
    border: 1px solid #cccccc;
}
.yy-input::-webkit-input-placeholder,
  textarea::-webkit-input-placeholder {
    /* WebKit browsers */
    color: red;
  }
    
}
</style>